<template>
    <van-search
      class="my_search"
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div><van-icon name="location-o" color="#fff" size="20px"/></div>
      </template>
      <template #label>
        <div>
          <span @click="$router.push('/city')">{{$store.state.cityInfo.name}}</span>
          <van-icon  @click="$router.push('/city')" name="arrow-down" />
           &nbsp;&nbsp;<span class="shugang"></span>&nbsp;
        </div>
      </template>
    </van-search>
</template>

<script>
export default {
  name: 'MySearch',
  data () {
    return {
      value: ''
    }
  },

  created () {

  },

  methods: {

  }
}
</script>

<style scoped lang='less'>
  .my_search{
    .van-search__action:active{
      background-color:transparent ;
    }
    .van-search__content{
      padding-left: 5px;
      background-color: #fff;
    }

    .shugang{
      display: inline-block;
      width: 1px;
      height: 16px;
      background-color: #ccc;
      vertical-align: middle;

    }
  }
</style>
